<template>
	<view class="details">
		<navBar @pageScrollTo="pageScrollTo" :currPoint="currPoint"></navBar>
		<view class="content">
			<detailSwiper :carDetails="carDetails"></detailSwiper>
			<carTitle :details="details"></carTitle>
			<detailsImg :carDetails="carDetails"></detailsImg>
			<detailsData id="data" :details="details"></detailsData>
			<detailsComment id="comment"></detailsComment>
			<recommend id="recommend" :list="recommendList"></recommend>
			<bottomBar :details="details" @collectionEvent="collectionEvent" @addOrder="addOrder"></bottomBar>
		</view>

	</view>
</template>

<script>
	import {get_recommend,set_collect} from '@/api/contents/collection/collection.js'
	import {get_details} from '@/api/contents/details.js'
	import {add_order} from '@/api/contents/order/order.js'
	
	import navBar from '@/components/details/navBar/navBar.vue'
	import detailSwiper from '@/components/details/detailSwiper/detailSwiper.vue'
	import carTitle from '@/components/details/carTitle/carTitle.vue'
	import detailsImg from '@/components/details/detailsImg/detailsImg.vue'
	import detailsData from '@/components/details/detailsData/detailsData.vue'
	import detailsComment from '@/components/details/detailsComment/detailsComment.vue'
	import recommend from '@/components/details/recommend/recommend.vue'
	import bottomBar from '@/components/details/bottomBar/bottomBar.vue'
	export default {
		components: {
			navBar,
			detailSwiper,
			carTitle,
			detailsImg,
			detailsData,
			detailsComment,
			recommend,
			bottomBar,
		},
		data() {
			return {
				carDetails: [
					require('@/static/car/1.png'),
					require('@/static/car/3.png'),
					require('@/static/car/4.png'),
					require('@/static/car/5.png'),
					require('@/static/car/6.png'),
					require('@/static/car/8.png'),
					require('@/static/car/9.png'),
					require('@/static/car/11.png'),
				],
				//商品，参数，评论，推荐的位置数组
				themeTopYs: [],
				//navBar的活跃数
				currPoint: 0,
				//推荐列表
				recommendList: [],
				//汽车详情
				details: {},
			};
		},
		methods: {
			getThemePos() {
				this.themeTopYs = []
				this.themeTopYs.push(0);
				const themeId = ['#data', '#comment', '#recommend']
				// #ifdef MP-WEIXIN  || APP-PLUS
				const myOffsetTop = 90
				// #endif
				// #ifdef H5
				const myOffsetTop = 70
				// #endif
				themeId.forEach(item => {
					wx.createSelectorQuery().select(item).boundingClientRect((rect) => {
						this.themeTopYs.push(rect.top - myOffsetTop); // 节点的上边界坐标
					}).exec()
				})
			},
			//点击导航栏滚动到指定位置
			pageScrollTo(index) {
				this.currPoint = index;
				uni.pageScrollTo({
					duration: 300,
					scrollTop: this.themeTopYs[index]
				})
			},
			//获取滚动的位置
			getPosition(position) {
				const positionY = position;
				let _lenth = this.themeTopYs.length;
				for (let i = 0; i < _lenth; i++) {
					if (this.currPoint !== i && ((positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i + 1]) ||
							(i ===
								_lenth - 1 && positionY >= this.themeTopYs[i]))) {
						this.currPoint = i;
					}
				}
			},
			// 获取推荐列表
			getCarList() {
				get_recommend().then(res => {
					if (res.code == 0) {
						this.recommendList = res.data.list;
					}
				})
			},
			//获取详情信息
			getCarDetails(car_id) {
				get_details({},car_id).then(res => {
					if (res.code == 0) {
						this.details = res.data;
					}
				})
			},
			//点击收藏事件
			collectionEvent(car_id) {
				set_collect({car_id}).then(res => {
					if(res.code==1){
						if(this.details.collection){
							this.$set(this.details,'collection',0)
						}else{
							this.$set(this.details,'collection',1)
						}
						console.log(this.details);
					}
				})
			},
			// 添加订单
			addOrder(car_id){
				add_order({car_id}).then(res=>{
					if(res.code==1){
						uni.showToast({
							icon:'none',
							title:'下单成功!'
						})
					}
				})
			}
		},
		onLoad(options) {
			this.$nextTick(() => {
				this.getThemePos();
			})
			this.getCarList();
			this.getCarDetails(options.car_id)
		},
		onPageScroll(e) {
			this.getPosition(e.scrollTop)
		}
	}
</script>

<style lang="scss" scoped>
	.details {

		// #ifdef MP-WEIXIN  || APP-PLUS
		.content {
			margin-top: 88px;
		}

		// #endif
		// #ifdef H5
		.content {
			margin-top: 44px;
		}

		// #endif
	}
</style>
